<template>
  <div v-loading="loading">
    <!--    <el-radio-group v-model="form.insidePage" @change="openInsidePageChange">
      <el-radio
        v-for="item in insideLinkSystemPageOptions"
        :key="item.key"
        :label="item.key"
      >{{ item.label }}
      </el-radio>
    </el-radio-group>-->
    <div class="table-container">
      <el-table
        :data="list"
        border
        stripe
        style="width: 100%"
        max-height="500"
        size="small"
        element-loading-text="加载中"
        empty-text="暂无数据"
      >
        <el-table-column prop="title" label="页面名称" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="选择" width="100">
          <template slot-scope="scope">
            <el-radio
              v-model="form.commonCode"
              :label="scope.row.id"
              @change="choose(scope.row)"
            >
              {{ form.commonCode === scope.row.id ? "已选" : "选择" }}
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <CustomerOperation ref="customerOperationDialog" />
  </div>
</template>

<script>
import CustomerOperation from '../components/CustomerOperation'
import { lowCodePageList } from '@/views/wxaNewBuildModule/api/marketing'
import { PAGE_TYPE } from '@/views/wxaNewBuildModule/config'
// import wxaBuildConfig from '@/views/wxaBuildModule/config'

export default {
  components: {
    CustomerOperation
  },
  props: {
    row: {
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // insideLinkSystemPageOptions: [],
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT',
      form: {
        insidePage: null,
        commonCode: null
      },
      list: [],
      /* 分页 */
      paginationConfig: {
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
        pageType: PAGE_TYPE.PAGE_MODAL
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.form.commonCode = this.row.insideParams.commonCode
    this.fetchData()
  },
  methods: {
    /**
     * 数据组
     */
    async fetchData() {
      const { code, data: { list, total } } = await lowCodePageList({
        ...this.paginationConfig
      })
      if (code === 0 && list.length > 0) {
        this.list = list
        this.paginationConfig.total = total
      }
      console.log('系统页面列表', list)
    },
    /**
     * 按钮组
     */
    // 选择
    choose(row) {
      const pagePath = 'pages/sp-common/pages/customer-page/index'
      console.log('系统页面', row, pagePath)
      const params = {
        insidePage: row.title,
        path: `${pagePath}?pageId=${row.id}`,
        mode: 'navigateTo',
        insideParams: {
          insidePageType: 'MICRO_PAGE',
          commonCode: row.id,
          pageId: row.id,
          remark: '站内链接 > 微页面 > ' + row.title
        }
      }
      this.$emit('selectInsideLink', { type: 'MICRO_PAGE', params })
    },
    // 操作详情
    operBtn() {
      this.$refs.customerOperationDialog.open({ roleType: 'wx_kf' })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-radio {
  display: block;
  height: 40px;
  line-height: 40px;
}

.el-radio + .el-radio {
  margin-left: 0;
}
.operBtn {
  color: #409eff;
  cursor: pointer;
}
</style>
